<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>学生信息管理</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<h1>新增学员</h1>
		<form action="http://www.baidu.com/s?" class="info" autocomplete="off">
			姓名：<input type="text" class="uname" name="uname" /> 年龄：<input
				type="text"
				class="age"
				name="age"
			/>
			性别:
			<select name="gender" class="gender">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			薪资：<input type="text" class="salary" name="salary" />
			就业城市：<select name="city" class="city">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
				<option value="深圳">深圳</option>
				<option value="曹县">曹县</option>
			</select>
			<button class="add">录入</button>
		</form>

		<h1>就业榜</h1>
		<table>
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>薪资</th>
					<th>就业城市</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
			</tbody>
		</table>
		<script>
			// 获取对象
			const form = document.querySelector("form");
			const uname = document.querySelector(".uname");
			const age = document.querySelector(".age");
			const gender = document.querySelector(".gender");
			const salary = document.querySelector(".salary");
			const city = document.querySelector(".city");
			const tbody = document.querySelector("tbody");
			// 存数据数组
			const data = [];

			// 检测输入的表单不可为空
			form.addEventListener("submit", (e) => {
				e.preventDefault();
				if (!uname.value || !age.value || !salary.value) {
					return alert("内容不能为空");
				}
				// 创建对象
				const staff = {
					id:
						data.length === 0
							? data.length + 1
							: data[data.length - 1].id + 1,
					uname: uname.value,
					age: age.value,
					gender: gender.value,
					salary: salary.value,
					city: city.value,
				};
				// 将对象添加到数组
				data.push(staff);
				form.reset();
				displayTable();
			});

			// 为tbody添加点击事件委托
			tbody.addEventListener("click", (e) => {
				if (e.target.nodeName === "A") {
					data.splice(e.target.dataset.index, 1);
					displayTable();
				}
			});

			// 渲染表格的函数
			function displayTable() {
				// 在遍历之前,先将tbody的内容清空
				tbody.innerHTML = "";
				for (let i = 0; i < data.length; i++) {
					const tr = document.createElement("tr");
					tr.innerHTML = `
          <td>${data[i].id}</td>
          <td>${data[i].uname}</td>
          <td>${data[i].age}</td>
          <td>${data[i].gender}</td>
          <td>${data[i].salary}</td>
          <td>${data[i].city}</td>
          <td>
            <a href="javascript:" data-index=${i}>删除</a>
          </td>`;
					tbody.appendChild(tr);
				}
			}
		</script>
	</body>
</html>
